<template>
  <div class="setting-account setting-content">
    <h3>账号设置</h3>
    <div class="content">
      <div class="label-form">
        <p>用户名</p>
        <span :class="{ 'size-large': userInfo.username }">{{ userInfo.username || '您还没有用户名' }}</span>
        <em
          v-if="!userInfo.username"
          @click="isBindWx = false; isBindUserName = true; loginModalVisible = true"
          >用户名密码绑定</em
        >
      </div>
      <div class="label-form">
        <p>密码</p>
        <span :class="{ 'size-large': userInfo.bindPassword }">{{ userInfo.bindPassword ? '********' : '存在风险，请设置密码（注册用户名或者绑定邮箱后才可设置密码）' }}</span>
        <em @click="passwordModalVisible = true" v-if="userInfo.username || userInfo.email">
          {{ userInfo.bindPassword ? '修改密码' : '设置密码' }}
        </em>
      </div>
      <div class="label-form third-auth">
        <p>邮箱</p>
        <img src="~/assets/images/email-logo.png" alt="">
        <span>{{ userInfo.email || '您还未绑定邮箱' }}</span>
        <em v-if="!userInfo.email" @click="emailModalVisible = true">绑定邮箱</em>
        <em class="unbind" @click="unBindRelation('email')" v-else>解绑</em>
      </div>
      <div class="label-form third-auth">
        <p>微信</p>
        <img src="~/assets/images/wx-logo.png" alt="">
        <span>{{ userInfo.bindWx ? '已绑定' : '您还未绑定微信' }}</span>
        <em v-if="!userInfo.bindWx" @click="isBindWx = true; isBindUserName = false; loginModalVisible = true;" >绑定微信</em>
        <em class="unbind" @click="unBindRelation('weixin')" v-else>解绑</em>
      </div>
      <div class="label-form third-auth">
        <p>Github</p>
        <img src="~/assets/images/github-logo.png" alt="">
        <span>{{ userInfo.githubId ? userInfo.githubName : '您还未绑定Github' }}</span>
        <em v-if="!userInfo.githubId" @click="authenticateWithThird('github')">绑定Github</em>
        <em class="unbind" @click="unBindRelation('github')" v-else>解绑</em>
      </div>
      <div class="label-form third-auth">
        <p>Gitee</p>
        <img src="~/assets/images/gitee-logo.png" alt="">
        <span>{{ userInfo.giteeId ? userInfo.giteeName : '您还未绑定Gitee' }}</span>
        <em v-if="!userInfo.giteeId" @click="authenticateWithThird('gitee')">绑定Github</em>
        <em class="unbind" @click="unBindRelation('gitee')" v-else>解绑</em>
      </div>
    </div>
    <LoginModal
      :isBindWx="isBindWx"
      :isBindUserName="isBindUserName"
      v-if="loginModalVisible"
      @close-modal="loginModalVisible = false"
    />

    <EmailModal
      v-if="emailModalVisible"
      @close-modal="emailModalVisible = false"
    />

    <UpdatePassword
      :isReset="!!userInfo.bindPassword"
      v-if="passwordModalVisible"
      @close-modal="passwordModalVisible = false"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import LoginModal from '~/components/LoginModal'
import EmailModal from './components/EmailModal'
import UpdatePassword from './components/UpdatePassword'
export default {
  name: 'AccountPage',
  components: { LoginModal, EmailModal, UpdatePassword },
  data () {
    return {
      loginModalVisible: false,
      emailModalVisible: false,
      passwordModalVisible: false,
      isBindWx: false,
      isBindUserName: false
    }
  },

  head () {
    return {
      title: this.userInfo.nickname + '账号修改',
      meta: [
        { charset: 'utf-8' },
        {
          hid: 'description',
          name: 'description',
          content: this.userInfo.nickname + '账号修改'
        }
      ]
    }
  },

  methods: {
    unBindRelation (type) {
      this.$confirm({
        title: `解绑提示`,
        content: `解绑之后将无法通过该授权方式登录此账号。`,
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          const { data } = await this.$axios.get(`/gimishare/api/v1/users/unbind?type=${type}`)
          this.$message.success(`解绑成功`)
          this.$store.commit('UPDATE_USER_INFO', data)
        }
      })
    },

    authenticateWithThird (type) {
      const width = 1000
      const height = 720
      const left = 150
      const top = 150
      const linkMap = {
        github: 'https://github.com/login/oauth/authorize?client_id=Ov23liCiZWWku8B1MMog&https://gimi.zdxblog.cn&scope=user:email&state=github,bind',
        gitee: 'https://gitee.com/oauth/authorize?client_id=57a64666d7aa79411b3352e8805b6e52cf0c64d415e56756c7414a914e01dac8&redirect_uri=https://gimi.zdxblog.cn/&response_type=code&state=gitee,bind'
      }
      window.open(linkMap[type], 'ThirdApplicationAuth', `width=${width},height=${height},left=${left},top=${top}`)
    }
  },

  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  }
}
</script>

<style scoped lang="less">
.setting-account {
  .content {
    padding: 10px 0;
    .label-form {
      display: flex;
      font-size: 14px;
      padding: 16px 30px;
      align-items: center;
      p {
        width: 46px;
      }
      img {
        width: 18px;
        border-radius: 50%;
        display: none;
      }
      span {
        flex: 1;
        padding: 0 12px;
        color: #999;
        font-size: 12px;
        &.size-large {
          font-size: 16px;
        }
      }
      em {
        color: var(--primary-color);
        font-style: normal;
        cursor: pointer;
        letter-spacing: 1px;
        font-size: 13px;
        &.unbind {
          color: #c2281b;
        }
      }
    }
  }
}
</style>
